#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
    height: 100%;
}
/**
 * 文字按钮，去除边框，使按钮看起来更像一个文字，方便布局
 * ----------------------
 */
.el-button--text{
    padding: 0;
    color: #409EFF;
    background: 0 0;
}

.el-drawer__header{
    margin: 0;
    padding: 10px 16px;
    font-weight: bold;
    border-bottom: 1px solid lightgray;
}
.el-drawer__body {
    padding: 10px 16px;
}

/**
 * 原生的 input
 * ----------------------
 */
.sea-input {
    outline: 0;
    height: 30px;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #d2d6de;
}
.sea-input.with-square {
    padding: 0 6px;
    width: 20px;
    border-radius: 2px;
}
.input-number::-webkit-outer-spin-button,
.input-number::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
/*在firefox下移除input[number]的上下箭头*/
.input-number {
    -moz-appearance: textfield;
}

.sea-input:hover {
    border: 1px solid #909399;
}
.sea-input:focus {
    border: 1px solid #409EFF;
}

/**
 * element-ui 菜单栏样式调整
 * ----------------------
 */
.sea-menu:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.sea-menu {
    border: 0;
}
.sea-menu i {
    color: #FFFFFF;
}
.sea-menu i {
    color: #FFFFFF;
}
.sea-menu.is-active i {
    color: inherit;
}
.sea-menu.is-active i {
    color: inherit;
}

/**
 * 工具类按钮
 * ----------------------
 */
.sea-toolbar{

}
.sea-toolbar-button{
    font-size: 14px;
    padding: 0 20px;
    cursor: pointer;

    float: left;
    height: 58px;
    line-height: 58px;
    border-bottom: 2px solid transparent;
    color: #FFFFFF;
}
.sea-toolbar-button > i{
    color: #909399;
}
.sea-toolbar-button:hover{
    background-color: #434A50;
}

/**
 * 表单label占满一格，并且文字靠右展示
 * ----------------------
 */
.sea-form-label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sea-form-item{
    line-height: 40px;
}

.sea-form-error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding: 4px;
}

.sea-form-select-clear {
    color: #666;
    padding: 0 8px;
}
/**表单提交按钮加载条无法对齐修复*/
.sea-form-submit .el-loading-spinner{
    margin-top: -5px;
}

.sea-form-tree-searchbar{
    margin: 0 8px;
    color: gray;
    cursor: pointer;
}


/**
 * select-tree
 * ----------------------
 */
.sea-select-tree-clear {
    font-size: 14px;
    margin-left: 10px;
    color: #606266;
    height: 26px;
    box-sizing: border-box;
}

/**
 * page-title
 *
 * 消息盒子的主标题、副标题、超链接
 * ----------------------
 */
.sea-header{
    color: #606266;
}
.sea-header-title {
    display : inline;
    margin-right: 6px;
    cursor: default;
}

.sea-header-subtitle {
    font-size: 12px;
}

.sea-header a{
    font-size: 12px;
}

/**
 * collapse-checkbox
 * ----------------------
 */
.sea-cps-chk-header {
    border-bottom: 1px solid #d2d6de;
}

.sea-cps-chk-body {
    padding-left: 16px;
}

/**
 * editable-tree
 * ----------------------
 */
.sea-tree-node {
    width: 100%;
}
.sea-tree-node-tools {
    margin-left: 16px;
}
.sea-tree-node-label {
}
/**
 * 步骤条
 * ----------------------
 */
.sea-steps-item {
    margin: 0;
    float: left;
    cursor: pointer;
}
.sea-steps-item > span {
    margin: 0 6px 0 6px;
}
.sea-steps-item:last-child > .sea-steps-separator {
    display: none;
}
/**
 * 面包屑
 * ----------------------
 */
.sea-breadcrumb{
    display: inline;
}
.sea-breadcrumb-item{
    margin: 0;
    float: left;
}
.sea-breadcrumb-item > span{
    margin: 0 6px;
}
.sea-breadcrumb-item:last-child > .sea-breadcrumb-separator{
    display: none;
}
/**
 * scroll-bar
 * 更加优雅的滚动条，已经做好优化，如果内容物设置好了具体的宽度数值，
 * 自适应布局仍然会挤压内容物，这一点暂无更好的优化方案。
 * ----------------------
 */
.sea-scroll-bar {
    overflow: auto;
    margin-right: calc(100% - 100vm);
}
.sea-scroll-bar::-webkit-scrollbar-track-piece {
    background-color: #f8f8f800;
}
.sea-scroll-bar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    transition: all 2s;
}
.sea-scroll-bar::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 100px;
}
.sea-scroll-bar::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.sea-scroll-bar::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0);
}

/**
 * scroll-bar-hover
 *
 * 更加优雅的滚动条，鼠标悬浮才会显示滚动条。
 * 不要滥用这种滚动条，这种滚动条会让客户产生错觉，以为界面上只有这些数据。
 * 使用的地方，必须本身让用户觉得这里还有数据。
 *
 * 使用的场景：菜单栏、地址选择列表、聊天下拉等等
 * ----------------------
 */
.sea-scroll-bar-hover {
    overflow: hidden;
    -ms-overflow-style: none;
}
.sea-scroll-bar-hover::-webkit-scrollbar{
    width: 6px;
    height: 6px;
    transition: all 2s;
}
.sea-scroll-bar-hover:hover {
    overflow: auto;
}
.sea-scroll-bar-hover:hover::-webkit-scrollbar-track-piece {
    background-color: #f8f8f800;
}
.sea-scroll-bar-hover:hover::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: all 2s;
}
.sea-scroll-bar-hover:hover::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 100px;
}
.sea-scroll-bar-hover:hover::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.sea-scroll-bar-hover:hover::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0);
}
/**
 * el-table
 * 更加优雅的滚动条
 * ----------------------
 */
.el-table__body-wrapper::-webkit-scrollbar-track-piece {
    background-color: #f8f8f800;
}
.el-table__body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: all 2s;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 100px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.el-table__body-wrapper::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0);
}
.el-table__fixed{
    height:100% !important;
}
.el-table__fixed-right{
    height:100% !important;
}
.el-table--scrollable-x .el-table__body-wraper{
    overflow:visible;
}
.el-table__body-wrapper{
    overflow:visible;
}

/** 处理有x滚动条时高度遮挡滚动条*/
/*.el-table--scrollable-x .el-table__fixed,.el-table__fixed-right {*/
/*    height: calc(100% - 8px) !important;*/
/*}*/
/*!**  存在滚动条的时候在right*!*/
/*.el-table--scrollable-y.el-table__fixed-right {*/
/*    right: 8px !important;*/
/*}*/
/**  解决修改滚动条底部不对齐问题*/
.el-scrollbar__wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/**
 * 表格以及分页
 * ----------------------
 */
.sea-table {
    border-radius: 3px;
    /*border-top: 3px solid #3c8dbc;*/
    /*box-shadow: 0 0 1px #00000030, 0 1px 3px #00000030;*/
    background-color: #fff;
}
.sea-table-header{
    padding: 12px 16px;
}
.sea-table-header-buttons{
    margin: 4px;
}
.sea-table-body {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
}
.sea-table-footer {
    padding: 12px 16px;
}

/**
 * 行内输入框，缩小外边框
 */
td.sea-table-input{
    padding: 4px 0;
}
/**
 * 行内输入框，取消边框
 */
.sea-table-input > .el-input__inner{
    border: 0;
    border-radius: 0;
    padding-left: 6px;
}
/**
 * 行内下拉框，取消边框
 */
.sea-table-select .el-input__inner{
    border: 0;
    border-radius: 0;
}

/**
 * 表格以及分页
 * ----------------------
 */
.sea-list-view {
    background-color: #FFFFFF;
}
.sea-list-view-header{
}
.sea-list-view-body {
}
.sea-list-view-footer {
}

/**
 * el-dialog
 * 更加优雅的滚动条，并且重新设置了边距离，界面更加紧凑
 * ----------------------
 */
.el-dialog__header{
    border-bottom: 1px solid #d2d6de;
    padding: 12px 16px 10px;
}
.el-dialog__headerbtn{
    top: 16px
}
.el-dialog__body {
    padding: 10px;
    font-size: 12px;
}
.el-dialog__body::-webkit-scrollbar-track-piece {
    background-color: #f8f8f800;
}
.el-dialog__body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: all 2s;
}
.el-dialog__body::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 100px;
}
.el-dialog__body::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.el-dialog__body::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0);
}

.el-dialog__body >.sea-table{
    border: 0;
    box-shadow: none;
}

/**
 * el-card
 * 边距缩小到 18px，这个与标题是完全对齐的
 * ----------------------
 */
.el-card__body{
    padding: 18px;
}
.sea-card {
    padding: 6px;
}

/**
 * 骨架屏
 * ----------------------
 */
.sea-skeleton {
    background-image: linear-gradient(190deg, #d2d6de, #f0f0f0, #d2d6de);
    width: 100%;
    height: 1.4rem;
    list-style: none;
    background-size: 200% 100%;
    background-position: 0 0;
    animation: sea-skeleton-loading 1.4s ease infinite;
    margin-bottom:16px;
}
.sea-skeleton:first-child{
    width: 30%;
}
.sea-skeleton:last-child{
    width: 70%;
}
@keyframes sea-skeleton-loading {
    0% {    background-position:100% 0;
    }
    100% {    background-position: 0 100%;
    }
}


/**
 * image-picker
 * ----------------------
 */
.sea-image-picker-item {
    float: left;
    position: relative;
    border: lightgray 1px solid;
    border-radius: 2px;
    margin: 3px;
}

.sea-image-picker-remove {
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    position: absolute;
}

.sea-image-picker-remove>i {
    color: #409EFF;
    line-height: 20px;
    font-size: 20px;
}

.sea-image-picker-remove>i:hover {
    color: #F56C6C;
    border-radius: 100%;
    background-color: #FFFFFF;
}

.sea-image-picker-image {
    width: 96px;
    height: 96px;
    display: block;
}

.sea-image-picker-button {
    width: 96px;
    height: 96px;
    color: gray;
    cursor: pointer;
    font-size: 26px;
    line-height: 86px;
    text-align: center;
}

/**
 * file-picker
 * ----------------------
 */
.sea-file-picker{
    line-height: 16px !important;
}
.sea-file-picker-item {
    margin: 8px 0;
    cursor: pointer;
    font-size: small;
}

.sea-file-picker-item :hover{
    background-color: #f4f4f4;
}

.sea-file-picker-remove {
    color: #409EFF;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

.sea-file-picker-remove :hover {
    color: #F56C6C;
    background-color: rgb(255, 255, 255);
}

/**
 * flower
 *
 * 瀑布流布局
 * ----------------------
 */
.sea-flower-body {
    height: auto;
    margin: 0.3125rem auto;
    -moz-column-count: 2;
    /* Firefox */
    -webkit-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    /* 间隔 */
    column-gap: 1em;
}
.sea-flower-col-2{
    column-count: 2;
}
.sea-flower-col-3{
    column-count: 3;
}
.sea-flower-col-4{
    column-count: 4;
}
.sea-flower-item {
    height: auto;
    margin-bottom: 6px;
    background-color: #fff;
    break-inside:avoid;
    overflow: hidden;
}
.sea-flower-item:hover {
    box-shadow:  0 2px 12px rgba(0, 0, 0, 0.1)
}
/**
 * 按钮组
 * ----------------------
 */
.sea-button-group{
}

.sea-button-group>.el-button{
    margin-left: 0;
    margin-right: -1px;
    float: left;
    position: relative;
    border-radius: 0;
}
.sea-button-group>.el-button:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.sea-button-group>.el-button:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/**
 * 下拉按钮组
 * -------------------------------------------------------
 * 主要为了兼容按钮组
 */
.sea-dropdown-button{
    padding: 0;
    border: 1px solid lightgray
}
.sea-dropdown-button > button{
    border: 0;
    height: 30px;
}
/**
 * 气泡按钮组
 * -------------------------------------------------------
 * 主要为了兼容按钮组
 */
.sea-pop-button{
    padding: 0;
}
.sea-pop-button>span{
    display: inline-block;
    line-height: 30px;
    font-size: 12px;
    padding: 0 15px;
}

/**
 * 图片组
 * -------------------------------------------------------
 */

.sea-image-group {
}

.sea-image-item {
    width: 100px;
    height: 100px;
    border: 1px solid lightgray
}



.sea-tabs .el-tabs__item {
    /*height: 36px;*/
    /*line-height: 36px;*/
    /*border-bottom-color: #545c64;*/
}

.sea-tabs .el-tabs__item.is-active {
    /*border-bottom-color: #545c64;*/
}